<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
    <Student v-on:gyl="getstudentname" @demo="demo"/>
    <!-- <Student @gyl="getstudentname"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
    <!-- <Student ref="student"/> -->

  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    School,
    Student
  },
  data () {
    return {
      msg:"789"
    }
  },
  methods: {
    getSchoolName(name){
      console.log("school",name)
    },
    getstudentname(name,...props){
      console.log("student",name,props)
    },
    demo(){
      console.log("demo")
    }
  },
  mounted(){
    //this.$refs.student.$on('gyl',this.getstudentname)//绑定自定义事件
    //this.$refs.student.$once('gyl',this.getstudentname) //绑定自定义事件（一次性）
  }
  
};
</script>

<style>
.app{
background-color: grey;
padding: 5px;
}
</style>